<!--/**
*用户登录日志*
*
* @author LWG
* @date 2022/8/6 20:29
* @since 1.0.0
*/-->
<template>

    <div id="login_log">
        <div>
            <b style="font-size: 40px">用户登录日志</b>
            <br><br>
            <b style="font-size: 20px">所有用户登录日志</b>
        </div>
        <hr>

        <el-button style="font-size: 20px" @click="resetDateFilter">清除日期过滤器</el-button>
        <el-button style="font-size: 20px" @click="clearFilter">清除所有过滤器</el-button>
        <el-table ref="filterTable" :data="tableData" 
              :row-style="{height:'40px'}"
              :cell-style="{padding:'0px'}"
              style="width: 100%;font-size: 20px">
            <el-table-column prop="name" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="date" label="登录时间" sortable width="180" column-key="date"
                :filters="[{ text: '2016-05-01', value: '2016-05-01' }, { text: '2016-05-02', value: '2016-05-02' }, { text: '2016-05-03', value: '2016-05-03' }, { text: '2016-05-04', value: '2016-05-04' }]"
                :filter-method="filterHandler">
            </el-table-column>
            <el-table-column prop="ip" label="IP" width="180">
            </el-table-column>
            <el-table-column prop="address" label="登录地址" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="tag" label="登录平台" width="100"
                :filters="[{ text: '手机移动端', value: '手机移动端' }, { text: 'PC端', value: 'PC端' }]" :filter-method="filterTag"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.tag === '手机移动端' ? 'primary' : 'success'" disable-transitions>
                        {{ scope.row.tag }}</el-tag>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px ">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes=[20,40,60,80]
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>

    </div>
</template>

<script>
export default {
    name: "UserLoginLog",
    //   data() {
    //     return {
    //       tableData: [],
    //       username: '',
    //       city: '',
    //       createTime: '',
    //       sex: '未知',
    //       account: ''

    //     }
    //   },
    data() {
        return {
            tableData: [{
                name: '段三',
                date: '2016-05-02',
                ip: '192.168.222.10',
                address: '云南省临沧市凤庆县盘银镇 1518 弄',
                tag: '手机移动端'
            }, {
                name: '小锥子',
                date: '2016-05-02',
                ip: '222.168.222.10',
                address: '云南省临沧市凤庆县 1518 弄',
                tag: '手机移动端'
            }, {
                name: '鸭蛋',
                date: '2016-05-02',
                ip: '197.168.222.10',
                address: '临沧市凤庆县盘银镇 1518 弄',
                tag: 'PC端'
            }, {
                name: '蛋蛋',
                date: '2016-05-02',
                ip: '192.22.222.10',
                address: '云南省临沧市凤庆县盘银镇段家组 1518 弄',
                tag: '手机移动端'
            }],

            total: 0,
            sideWidth: 200,
            username: "",
            dialogFormVisible: false,
            form: {},
            pageNum: 0,
            pageSize: 20,
        }
    },
    created() {
        //请求分页查询数据
        this.load()
    },
    methods: {
        handleSizeChange(pageSize) {//设置每页展示多少条数据
            // console.log("设置每页展示多少条数据" + pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {//设置第几页
            // console.log("设置第几页" + pageNum)
            this.pageNum = pageNum
            this.load()
        },
        load() {//发起分页查询的网络请求
            this.request.get("admin/selectUser/" + this.pageNum + "/" + this.pageSize + "?username=").then(res => {
                // console.log(res)
                this.tableData = res.data.data
                this.total = res.data.total
            })
        },
        loadForName() {//发起分页查询的网络请求
            this.request.get("admin/selectUser/" + this.pageNum + "/" + this.pageSize + "?username=" + this.username).then(res => {
                // console.log(res)
                this.tableData = res.data.data
                this.total = res.data.total
            })
        },
        reset() {
            //将搜索框清空
            this.username = ""
            //刷新页面
            this.load()
        },
        changeState(id) {
            //将用户登录状态取反
            this.request.get("admin/changeState/" + id).then(res => {
                // console.log(res)
                if (res.state == 200) {
                    //修改成功,刷新页面
                    this.$message.success(res.message)
                } else {
                    this.$message.error(res.message);
                }
                this.load()
            })
        },

        resetDateFilter() {
            this.$refs.filterTable.clearFilter('date');
        },
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        formatter(row, column) {
            return row.address;
        },
        filterTag(value, row) {
            return row.tag === value;
        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        }

    }
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}

/* #login_log {
  height: 800px;
  overflow: scroll;
} */

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
